<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<!--  user-scalable=no禁止用户手动缩放 initial-scale=1.0固定比例1：1 maximum-scale=1.0/minimum-scale=1.0允许用户缩放到的最大/小比例 -->
    <title>珠峰培训-QQ音乐播放器</title>
    <!-- IMPORT CSS -->
    <link rel="stylesheet" href="./css/reset.min.css">
    <link rel="stylesheet" href="css/index.css">
    <!-- 会自动识别兼容自动加可兼容的前缀 后期我们会基于 webpack + postcss-loader + autoprefixer + browserlist 自动设置前缀 -->
    <!-- 延迟加载 跟其他js没有依赖用async -->
    <script src="./js/prefixfree.min.js" async></script>
    <script >
        /*计算rem和px的换算比例*/
        (function () {
            const computed = function computed(){
                let winW=document.documentElement.clientWidth,
                    ratio=100;
                if(winW>=750){//超过最大监听直接为1：100不再继续放大
                    document.documentElement.style.fontSize='100px';
                    return};
                ratio=winW/(750/100);
                document.documentElement.style.fontSize=ratio+'px';
            };
            computed();
            // let event=window.hasOwnProperty('onorientationchange')?'orientationchange':'resize';
            window.addEventListener('resize',computed);
        })();
    </script>
   
</head>

<body>
    <section id="app">
        <!-- 头部 -->
        <header class="header-box">
            <div class="base-info">
                <img src="images/myDream.jpg" alt="" class="pic">
                <h2 class="title"></h2>
                <h3 class="author"></h3>
            </div>
            <a href="javascript" class="music-btn"></a>
        </header>
        <!-- 歌词 -->
        <main class="main-box">
            <div class="lyric">
                <div class="wrapper">
                    <!-- <p class="active">
                        我的梦 (华为手机主题曲) - 张靓颖
                    </p>
                    <p>
                        词：王海涛/张靓颖
                    </p>
                    <p>
                        曲：Andy Love
                    </p> -->
                </div>
            </div>
        </main>

        <!-- 尾部 -->
        <footer class="footer-box">
            <div class="progress">
                <span class="already">00:00</span>
                <div class="back">
                    <div class="rate"></div>
                </div>
                <span class="duration">00:00</span>
            </div>
            <a href="#q" class="download">下载这首音乐</a>
        </footer>

        <!-- 背景 -->
        <div class="bg-image"></div>
        <div class="bg-mark"></div>

        <!-- 音频 -->
        <audio src="./images/myDream.m4a" id="myAudio" preload="metadata"></audio>
    </section>

    <!-- IMPORT JS -->
    <!-- 因为互相有依赖所以加入defer（异步） -->
    <script src="js/fastclick.js" defer></script>
    <script src="js/subscribe.js" defer></script>
    <script src="js/index.js" defer></script>
</body>

</html>